<!--
* @FileDescription: 滚动区域 自定义下拉刷新，回到顶部
* @Author: chenz
* @Date: 2021/4/15
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->

<template>
	<view>
		<!-- 自定义内容区域 -->
		<!-- <swiper class="container" @change="onChangeSwiper" :current="current"> -->
		<!-- <swiper-item v-for="(item, index) in list" :key="index"> -->
		<!-- 是否预加载  v-if="item.loaded || index == current"-->
		<template>
			<cl-scroller :ref="`clScroller`" @down="onDown" @up="onUp">
				<!-- 首次加载框，可有可无 -->
				<cl-loading-mask :loading="loading" text="加载中">
					<!-- 列表 -->
					<view class="list">
						<!-- 渲染的数据 -->
						<view class="task-list" v-for="(item, index) in datalist" :key="index">
							<view class="task-list-project">
								<!-- 头像 -->
								<view class="project-avatar">
									<image class="image-style" :src="'../../static/black.jpg'" mode=""></image>
								</view>
								<!-- 项目信息 -->
								<view class="project-info item-flex2">
									<view class="project-info-title">333333{{item.title}}</view>
									<view class="project-info-startime">开始时间：{{item.startTime}}</view>
									<view class="project-info-duration">项目时长：{{item.duration}}</view>
								</view>
								<!-- 状态 -->
								<view class="project-status item-flex1">
									<view class="status">{{item.satusText?item.satusText:"状态" }}</view>
									<view class="views-details" @click="goTo(123456)">查看详情</view>
								</view>
								<!-- 分割线 -->
								<cl-divider class="cl-divider-style" />
							</view>
						</view>
						<!-- 加载更多 -->
						<cl-loadmore v-if="item.data.length > 0" :loading="item.loading" :finish="item.finished" :divider="false"></cl-loadmore>
					</view>
				</cl-loading-mask>
			</cl-scroller>
		</template>
		<!-- </swiper-item> -->
		<!-- </swiper> -->
	</view>
</template>

<script>
	export default {
		props: {
			// 根据类型来判断显示什么样的页面
			datalistType: {
				type: Number
			},
			// 后端返回过来的数据即渲染   array类型
			datalist: {
				type: Array,
				default: function() {
					return [];
				}
			},
		},
		data() {
			return {
				loading: false,
				type: 1,
				finished: false,
				pagination: {
					page: 1,
					size: 20
				}
			};
		},
		watch: {
			// 监听传过来的类型
			datalistType: function(datalistType) {
				console.log('监听传过来的类型', datalistType)
			},
			// 监听数据
			datalist: {
				handler: function(datalist) {
					console.log("监听数据", datalist)
					datalist = datalist
				},
				deep: true,
			}
		},

		created() {
			this.onDown();
			console.log('this.datalistType', this.datalistType)
			console.log('this.datalist', this.datalist)
		},

		methods: {
			// 下拉刷新
			onDown() {
				console.log('onDown',this.$refs.clScroller)
				this.refresh({
					page: 1
				}).done(() => {
					this.$refs.clScroller.end();
				});
			},

			// 上拉加载更多
			onUp() {
				console.log('onUp')
				// const {
				// 	pagination,
				// 	finished
				// } = this.datalist[this.current];

				if (!finished) {
					this.refresh({
						page: this.pagination.page + 1
					});
				}
			},

			// // 左右滑动触发事件
			// onChangeSwiper(e) {
			// 	console.log('e', e)
			// 	this.current = e.detail.current;

			// 	if (!this.list[this.current].loaded) {
			// 		this.loading = true;
			// 		this.list[this.current].loaded = true;
			// 	}

			// 	setTimeout(() => {
			// 		this.refresh({
			// 			page: 1
			// 		});
			// 	}, 500);
			// },

			// 请求数据
			refresh(params = {}) {
				console.log('...argm', params)
				const item = this.datalist;
				console.log('item',item)
				var _this = this
				let data = {
					..._this.pagination,
					// status: item.status,
					sort: "desc",
					order: "createTime",
					...params
				};

				return new Promise(resolve => {
					item.loading = true;

					console.log("Refresh");

					setTimeout(() => {
						item.data = new Array(data.page == 1 ? 10 : data.page * 10).fill(1);
						item.pagination.page = data.page;
						item.finished = false;
						item.loading = false;
						this.loading = false;
						resolve();
					}, 500);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		// #ifdef H5
		height: 100%;
		// #endif

		// #ifndef H5
		height: 100vh;
		// #endif
	}

	.task-hall {
		width: 100%;
		height: 100%;

		.top {
			height: 100%;
		}
	}

	.container {
		height: calc(100% - 110rpx);
		background-color: #f7f7f7;
	}

	.list {
		padding: 20rpx;

		/deep/.cl-list-item {
			margin-bottom: 20rpx;
			border-radius: 10rpx;
		}

		// 每一项
		.task-list {
			margin: 20rpx;
			height: 172upx;
			// background-color: pink;

			// 布局
			.task-list-project {
				// background-color: $subject-bgc;
				width: 100%;
				height: 152rpx;
				display: flex;
				// border-bottom: 1rpx solid #d8d9dc;
				// flex-direction:row;  // 布局方向 x轴从左至右
				// flex-wrap:nowrap;  // 换行 不换行
				flex-flow: row nowrap; // 是以上的简写形式
				justify-content: flex-start; // 在主轴的对其方式 从左往右
				align-items: center; // 交叉轴上如何对齐 默认占满
				position: relative;

				.project-avatar {
					padding-left: 10rpx;
					flex: 0.8;

					.image-style {
						width: 130rpx;
						height: 130rpx;
						border-radius: 12rpx;
						margin: auto 0;
					}
				}

				.project-info {
					height: 100%;
					position: relative;

					// 标题
					.project-info-title {
						font-size: 32rpx;
						position: absolute;
						top: 8rpx;
						color: rgba(0, 0, 0, 0.76);
					}

					// 开始时间 
					.project-info-startime {
						font-size: 24rpx;
						position: absolute;
						top: 64rpx;
						color: $text-color;
					}

					// 时长
					.project-info-duration {
						font-size: 24rpx;
						position: absolute;
						top: 102rpx;
						color: $text-color;
					}

					// 空闲时间信息
					.project-info-message {
						font-size: 24rpx;
						color: $text-color;
						padding: 10rpx 40rpx 0 10rpx;
					}
				}

				// 项目状态
				.project-status {
					height: 100%;
					position: relative;

					// 状态
					.status {
						color: $subject-bgc;
						font-size: 32rpx;
						position: absolute;
						top: 10rpx;
						left: 74rpx;
					}

					// 查看详情
					.views-details {
						color: $text-color;
						font-size: 24rpx;
						position: absolute;
						top: 100rpx;
						left: 74rpx;
					}
				}

				// 设置分割线位置
				.cl-divider-style {
					padding: 0 10rpx 0 10rpx;
					position: absolute;
					top: 128rpx;
					left: 0rpx;
					right: 0rpx;
					bottom: 0rpx;
				}
			}
		}
	}

	.cl-tabs__bar-box {
		display: flex;
	}

	.cl-tabs__bar-item {
		flex: 1;
	}

	.cl-list-item__container {
		background-color: skyblue;
	}


	.item-flex1 {
		flex: 1;
	}

	.item-flex2 {
		flex: 2;
	}

	.item-flex3 {
		flex: 3;
	}
</style>
